<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--导入JSTL核心标签库（使用便签来代替Java代码）--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>yonghe</title>
    <%--url:http://localhost:8080/door/list--%>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="container-fluid">

    <div class="app-title">
        <div>
            <h1><i class="fa fa-circle-o"></i> 门店管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="/welcome">首页</a></li>
            <li class="breadcrumb-item active">门店管理</li>
        </ul>
    </div>

    <div class="tile">

        <form id="form-search" class="form-inline" action="/door/list">
            <%--表达隐藏域，用来保存页码参数--%>
            <input type="hidden" name="pageNum" value="1">
                <%--param是JSP内置的请求参数对象，实质上就是一个Map集合--%>
            <input type="text" class="form-control mr-1" name="name" value="${param.name}" placeholder="门店名称">
            <button type="submit" class="btn btn-outline-primary mr-1">
                <i class="fa fa-search"></i>搜索
            </button>
            <a href="/door/add" class="btn btn-outline-success mr-1">
                <i class="fa fa-plus-square"></i>新增
            </a>
        </form>
        <br>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>门店名称</th>
                    <th>联系电话</th>
                    <th>门店地址</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th width="100"></th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${pageInfo.list}" var="door">
                <tr>
                    <td>${door.id}</td>
                    <td>${door.name}</td>
                    <td>${door.tel}</td>
                    <td>${door.addr}</td>
                    <td>
                        <%--判断分支--%>
                        <c:if test="${door.status==1}">
                            <span class="badge badge-success">营业中</span>
                        </c:if>
                        <c:if test="${door.status==2}">
                            <span class="badge badge-warning">歇业中</span>
                        </c:if>
                        <c:if test="${door.status==3}">
                            <span class="badge badge-secondary">已停业</span>
                        </c:if>
                    </td>
                    <td>${door.createdTime}</td>
                    <td>${door.updatedTime}</td>
                    <td>
                        <a class="text-info detail" href="/door/update?id=${door.id}" title="修改"><i class="fa fa-lg fa-edit"></i></a>
                        <a class="text-danger remove" href="javascript:void(0)" onclick="doDelete(${door.id})" title="删除"><i class="fa fa-lg fa-trash"></i></a>
                    </td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <!--分页-->
        <ul class="pagination">
            <c:if test="${pageInfo.hasPreviousPage}">
                <%--前一页--%>
                <li class="page-item">
                    <a class="page-link" onclick="jump(${pageInfo.prePage})">«</a>
                </li>
            </c:if>
            <%--遍历所有导航页号--%>
            <c:forEach items="${pageInfo.navigatepageNums}" var="i">
                <%--若当前页码与当前遍历的导航页号相同，则添加激活样式--%>
                <li class="page-item ${pageInfo.pageNum==i?'active':''}">
                    <a class="page-link" onclick="jump(${i})">${i}</a>
                </li>
            </c:forEach>
            <%--下一页--%>
            <c:if test="${pageInfo.hasNextPage}">
                <li class="page-item">
                    <a class="page-link" onclick="jump(${pageInfo.nextPage})">»</a>
                </li>
            </c:if>
        </ul>

    </div>
    <!-- /.tile -->
</div>
<!-- /.container-fluid -->

<!-- Essential javascripts for application to work-->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
<!-- Page specific javascripts-->
<script src="/js/plugins/sweetalert.min.js"></script>
<script>
    //跳页
    function jump(pageNum) {
        //提交表单前替换要跳转的页码值
        $("[name=pageNum]").val(pageNum);
        //通过JS来提交表单
        $("#form-search").submit();
    }
    //处理删除操作
    function doDelete(id){
        swal({
            text: "删除操作无法恢复，您确定要删除吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true
        }).then(function(isConfirm) {
            if (isConfirm)
                window.location.href = "/door/delete?id="+id;
        });
    }
</script>

</body>
</html>